<template>
	<div class="container">
		<div class="image">
			<img :src="require('@/assets/notice/'+this.noticItems.imageUrl)">
		</div>
		<div class="notice_content">
			<div class="title">
				<span>{{noticItems.title}}</span>
			</div>
			<div class="publishedTime">
				<span>{{this.noticItems.publishTime.substring(0,10)}}</span>
			</div>
			<div class="content">
				<p class="content_details">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.noticItems.content}}
				</p>
				<!-- <span class="abstract_content">{{item.abstract}}</span> -->
			</div>

		</div>
	</div>
</template>

<script>
	import request from '../../utils/axios/request'
	export default {
		data() {
			return {
				noticItems: {
					id: '',
					title: '',
					content: '',
					imageUrl: '',
					publishTime: ''
				}
			}
		},
		mounted() {
			let nId = this.$route.query.noticeId
			request({
				method: 'get',
				url: '/notice/' + nId,
			}).then((res) => {
				console.log(res)
				this.noticItems.id = res.data.data.noticeId
				this.noticItems.title = res.data.data.noticeTitle
				this.noticItems.content = res.data.data.noticeContent
				this.noticItems.imageUrl = res.data.data.imageUrl
				this.noticItems.publishTime = res.data.data.noticeCreatetime
			})
			console.log(this.noticItems)
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 800px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		/* background-color: #ff5500; */
	}
	.image{
		width: 100%;
		height: 360px;
		background-color: #d1e7c8;
	}
	.image img{
		
	}
	.notice_content{
		width: 100%;
		height: 500px;
		background-color: #ffffff;
	}
	.title{
		width: 100%;
		text-align: left;
		height: 40px;
		font-size: 28px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 40px;
		background-color: #ffffff;

	}
	.content{
		width: 100%;
		height: auto;
		font-size: 20px;
		line-height: 30px;
		background-color: #ffffff;
	}
	.content_details{
		width: 100%;
		height: auto;
		line-height: 30px;
		font-size: 20px;
		text-align: start;
		margin: 0 auto;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		/*  超出的文本隐藏 */
		display: -webkit-box;
		/* 将对象作为弹性伸缩盒子模型显示。 */
		-webkit-line-clamp: 2;
		/* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
	}
	.publishedTime{
		width: 100%;
		margin-top: 10px;
		height: 20px;
		line-height: 20px;
		text-align: left;
		margin-bottom: 10px;
		background-color: #ffffff;
	}
</style>